﻿@{
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
    ViewBag.Title = "用户管理";
}
<div class="header">
    <h1>@ViewBag.Title</h1>
</div>
<ul class="breadcrumb">
    <li>@Html.ActionLink("首页", "Index", "Home")</li>
    <li>@Html.ActionLink("用户管理", "Index")</li>
</ul>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="btn-toolbar" id="toolbar">
            <a class="btn btn-primary" href="@Url.Action("Create")" data-toggle="modal" data-target="#modalEdit">
                <i class="fa fa-plus"></i> 添加 用户
            </a>
        </div>
        <div class="well">
          
            <table id="table"
                   data-url="@Url.Action("List")"
                   data-side-pagination="server"
                   data-toggle="table"
                   data-height="400"
                   data-pagination="true"
                   data-search="true">
                <thead>
                    <tr>
                        <th data-field="UserName" data-align="center" data-sortable="true">登录名</th>
                        <th data-field="NickName" data-align="center" data-sortable="true">姓名</th>
                        <th data-field="Email" data-align="center" data-sortable="true">邮箱</th>
                        <th data-field="PhoneNumber" data-align="center" data-sortable="true">电话号码</th>
                        <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">编辑</th>
                    </tr>
                </thead>
            </table>
        </div>
       
        <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="modalEditContent">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">编辑</h4>
                    </div>
                    <div class="modal-body">
                        Loading content...
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script>
        var $table = $('#table');

        function operateFormatter(value, row, index) {
            return [
                '<a class="edit ml10" href="javascript:void(0)" title="编辑">',
                '<i class="glyphicon glyphicon-edit"></i>编辑',
                '</a>',
                '<a class="roles ml10" href="javascript:void(0)" title="角色">',
                '<i class="fa fa-pencil"></i>角色',
                '</a>',
                '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
                '<i class="glyphicon glyphicon-remove"></i>删除',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .edit': function(e, value, row, index) {
                $("#modalEdit").modal({ remote: '@Url.Action("Edit")?id=' + row.Id });
            },
            'click .roles': function (e, value, row, index) {
                $("#modalEdit").modal({ remote: '@Url.Action("UserRoles")?id=' + row.Id });
            },
            'click .remove': function (e, value, row, index) {
                $("#modalEdit").modal({ remote: '@Url.Action("Delete")?id=' + row.Id });
            }
        };
        function OnSuccess(result) {
            if (result.success) {
                $('#modalEdit').modal('hide');
                $table.bootstrapTable('refresh');
                //  Load data from the server and place the returned HTML into the matched element
                //$('#replacetarget').load(result.url);
            } else {
                $('#modalEditContent').html(result);
            }
            //$("#modalEdit").modal('hide');
            //$table.bootstrapTable('refresh');
        }

        $(function() {
            $("#modalEdit").on("hidden.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
        });
    </script>
}
